<template>
    <!-- 侧边栏 -->
    <el-aside width="200px" height="1000px">
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                :default-active="activeIndex" text-color="#fff" :unique-opened="true">
                <!-- 课程设计任务栏 -->
                <el-sub-menu v-for="menu in obj.data" :key="menu.menuid" :index="menu.menuname">

                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon><span>{{ menu.menuname }}</span>
                    </template>
                    <el-menu-item-group v-for="chmenu in menu.menus" :index="'/' + chmenu.url" :key="chmenu.menuid">
                        <!-- <template #title>Group 1</template> -->
                        <el-menu-item :index="'/' + chmenu.url" @click="$router.push(chmenu.url)"><span>{{ chmenu.menuname
                        }}</span></el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { Menu as IconMenu, Message, School, Bicycle, Monitor } from '@element-plus/icons-vue'
import { buildLocaleContext } from 'element-plus';
import router from '../router/index.js';
import { useRouter, useRoute } from 'vue-router'
const route = useRoute();



const obj = reactive({
    data: [
        {
            menuid: 1,
            icon: 'li-icon-xiangmuguanli',
            menuname: '课题记录',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 11,
                    icon: 'icon-order-manage',
                    menuname: '课程课题',
                    hasThird: 'N',
                    url: "allCourseTask",
                    menus: null
                },
                {
                    menuid: 12,
                    icon: 'icon-order-manage',
                    menuname: '校内课题',
                    hasThird: 'N',
                    url: "allInnerCampus",
                    menus: null
                },
                {
                    menuid: 13,
                    icon: 'icon-order-manage',
                    menuname: '校外课题',
                    hasThird: 'N',
                    url: "allOffCampuss",
                    menus: null
                },
            ]
        },
        {
            menuid: 3,
            icon: 'li-icon-dingdanguanli',
            menuname: '数据管理',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 30,
                    icon: 'icon-order-manage',
                    menuname: '班级信息',
                    hasThird: 'N',
                    url: "classdata",
                    menus: null
                },
                {
                    menuid: 31,
                    icon: 'icon-order-manage',
                    menuname: '学生信息',
                    hasThird: 'N',
                    url: "studata",
                    menus: null
                },
                {
                    menuid: 32,
                    icon: 'icon-order-manage',
                    menuname: '教师信息',
                    hasThird: 'N',
                    url: "teadata",
                    menus: null
                },
                {
                    menuid: 34,
                    icon: 'icon-order-manage',
                    menuname: '教学大纲',
                    hasThird: 'N',
                    url: "praccourse",
                    menus: null
                },
                {
                    menuid: 35,
                    icon: 'icon-order-manage',
                    menuname: '培养方案',
                    hasThird: 'N',
                    url: "trainplan",
                    menus: null
                },
                {
                    menuid: 33,
                    icon: 'icon-order-manage',
                    menuname: '实践课程任务',
                    hasThird: 'N',
                    url: "practask",    
                    menus: null
                },
                {
                    menuid: 36,
                    icon: 'icon-order-manage',
                    menuname: '课程设计任务题库',
                    hasThird: 'N',
                    url: "taskBase",
                    menus: null
                },
            ]
        },
        {
            menuid: 4,
            icon: 'li-icon-dingdanguanli',
            menuname: '数据分析',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 41,
                    icon: 'icon-order-manage',
                    menuname: '统计数据',
                    hasThird: 'N',
                    url: 'dataAnalysis',
                    menus: null
                },
            ]
        },
        {
            menuid: 5,
            icon: 'li-icon-dingdanguanli',
            menuname: '企业管理',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 51,
                    icon: 'icon-order-manage',
                    menuname: '企业数据',
                    hasThird: 'N',
                    url: 'companyData',
                    menus: null
                },
                {
                    menuid: 52,
                    icon: 'icon-order-manage',
                    menuname: '学生评论',
                    hasThird: 'N',
                    url: 'studentEvaluate',
                    menus: null
                },
            ]
        },
        {
            menuid: 6,
            icon: 'li-icon-dingdanguanli',
            menuname: '个人中心',
            hasThird: null,
            url: null,
            menus: [
                {
                    menuid: 61,
                    icon: 'icon-order-manage',
                    menuname: '个人信息',
                    hasThird: 'N',
                    url: "usercenter",
                    menus: null
                },
            ]
        },

    ],

})

// function menuItem(rout){
//     // $router.push('/pathName')
//     console.log(rout)
// }

// function jump() {
//     router.push('/pathName')
// }

const activeIndex = ref('')
//监控url变化 
watch(() => route.path, (newPath, oldPath) => {
    const url = '/' + newPath.split('/')[2];
    activeIndex.value = url;
    // 在这里可以执行一些你需要的操作
});

</script>

<!-- <style scoped>
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #283593;
}
.layout-container-demo .el-menu {
  border-right: none;
}
</style> -->
